<template>
  <view class="ai-message-swiper">
    <swiper class="swiper-box"
      @change="change" 
      :current="swiperDotIndex" 
      :autoplay="autoplay" 
      :interval="3000"
      :duration="500"
      :indicator-dots="false">
      <swiper-item v-for="(msg, idx) in messages" :key="idx">
        <view class="swiper-item" @click="messageClick(idx)">{{msg.label}}</view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
  export default {
    name: "ai-message-swiper",
    emits: ["selected"],
    props: {
      messages: Array,
      autoplay: {
        type: Boolean,
        default: true
      }
    },
    data() {
      return {
        current: 0,
        swiperDotIndex: 0,
      };
    },
    methods: {
      change(e) {
        this.current = e.detail.current
      },
      clickItem(e) {
        this.swiperDotIndex = e
      },
      messageClick(idx) {
        //console.log(this.images[idx])
        this.$emit('selected', this.messages[idx])
      }
    }
  }
</script>

<style lang="scss">
  @import "@/styles/_var.scss";

  .ai-message-swiper {
    width: 100%;
    height: 24px;
  }

  .swiper-item {
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 24px;
    color: var(--gray-2);
    text-overflow: ellipsis;
    overflow: hidden;
    word-wrap: nowrap;
  }
</style>